<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>WELCOME</title>

    <!--Bootstrap CSS-->
    <!--		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <!--消息提示组件 CSS-->
    <link rel="stylesheet" href="../lib/spop-gh-pages/dist/spop.css">
    <!--自定义 CSS-->
    <link type="text/css" rel="styleSheet"  href="../css/welcome.css" />
</head>

<body>
    <!-- 顶部半透明容器 -->
    <div class="navbar navbar-fixed-top ">
        <div class="col-xs-1 aTopAndBottom ">
            <a href="news.html"><span class="glyphicon glyphicon-home"></span></a>
        </div>
        <!--用户-->
        <div class="col-xs-1 user">
            <div class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <span><img class="circleImg" src="../img/user.jpg"></span>
                    <span id="username" class="username"></span>
                </a>
                <ul class="dropdown-menu">
                    <li id="personalInfoBtn">
                        <a href="" data-toggle="modal" data-target="#personalInfo">
                            个人信息
                        </a>
                    </li>
                    <li id="logoutBtn">
                        <a href="javascript:void(0);">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 中部容器 -->
    <div class="container">
        <div class="main">
            <h1 class="title">life always happy</h1>
        </div>
    </div>

    <!-- 外部网易云音乐 插件-->
    <iframe class="netease_Player" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=300
            src="//music.163.com/outchain/player?type=0&id=606650925&auto=0&height=430">
    </iframe>

    <!-- 底部半透明容器：四选项 -->
    <div class="navbar navbar-fixed-bottom">
        <!-- 学习分类 -->
        <div class="col-xs-3 aTopAndBottom bottomSelect">
            <a id="study">
                <span class="glyphicon glyphicon-education"></span>
            </a>
        </div>
        <!-- 学习分类 end -->

        <!-- 视频分类  -->
        <div class="col-xs-3 aTopAndBottom">
            <a id="video">
                <span class="glyphicon glyphicon-film"></span>
            </a>
        </div>
        <!-- 视频分类 end -->

        <!-- 音乐分类 -->
        <div class="col-xs-3 aTopAndBottom bottomSelect">
            <li class="dropup">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-music"></span>
                </a>
                <ul class="dropdown-menu dropdownSelect">
                    <li>
                        <a id="openMusic" href="javascript:void(0);" onclick="openMyMusic()"><b>本地播放</b></a>
                    </li>
                    <li>
                        <a href="http://music.163.com/playlist?id=606650925&userid=424310419" target="_blank"><b>我喜欢的</b></a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" target="_blank"><b>精选歌曲</b></a>
                    </li>
                </ul>
            </li>
        </div>
        <!-- 音乐分类 end -->

        <!-- 更多分类  -->
        <div class="col-xs-3 aTopAndBottom bottomSelect">
            <div class="dropup">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    更多
                </a>
                <ul class="dropdown-menu dropdownSelect dropdown-menu-right">
                    <li>
                        <a href="javascript:void(0);">联系我</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">收藏</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 更多分类 end -->
    </div>
    <!-- 底部半透明容器：四选项 end -->

    <div id="personalInfo" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">个人信息</h1>
                </div>
                <div class="modal-body">
                    <div id="loginForm" class="form-horizontal">
                        <div class="form-group">
                            <label id="personalUsernameLabel" for="personalUsername">&nbsp;&nbsp;&nbsp;&nbsp;用户名:&nbsp;</label>
                            <label id="personalUsername"></label>
                        </div>
                        <div class="form-group">
                            <label id="personalPasswordLabel" for="personalPassword">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:&nbsp;</label>
                            <label id="personalPassword"></label>
                        </div>
                        <div class="form-group">
                            <label id="personalSexLabel" for="personalSex">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别:&nbsp;</label>
                            <label id="personalSex"></label>
                        </div>
                        <div class="form-group">
                            <label id="personalBirthdayLabel" for="personalBirthday">出生日期:&nbsp;</label>
                            <label id="personalBirthday"></label>
                        </div>
                        <div class="form-group">
                            <label id="personalPhoneLabel" for="personalPhone">联系方式:&nbsp;</label>
                            <label id="personalPhone"></label>
                        </div>
                        <div class="form-group">
                            <label id="personalEmailLabel" for="personalEmail">电子邮箱:&nbsp;</label>
                            <label id="personalEmail"></label>
                        </div>
                        <br>
                        <div class="form-group">
                            <input id="updatePersonalInfoBtn" class="btn btn-primary btn-block modal-content" type="submit" value="修改" style="background-color: #afd2ff66;border: 0px solid transparent;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../lib/js/jquery-1.11.0.min.js"></script>
    <!--BootStrap JS-->
    <script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
    <!--消息提示组件 JS-->
    <script src="../lib/spop-gh-pages/dist/spop.js"></script>
    <!--导入JS-->
    <script src="../js/welcome-after.js"></script>

</body>

</html>